﻿@using thousandClear.Areas.Admin.Models;
@model List<ProjectModel>
<div id="app">
    <div class="ui-flex ui-box font-center bg-white" style="padding: 10px 0px;">
        <div class="col20">
            <span style="color: white">返回</span>
        </div>
        <div class="col60 font-16">
            <span>小时工</span>
        </div>
        <div class="col20">
        </div>
    </div>
    <div class="ui-flex" v-if="showGood">
        <div class="ui-flex ui-box" style="padding: 20px 5px;">
            <img src="~/Statics/Images/shop/main/welcome5.png" style="width: 80%; margin-left: 10%;" />
        </div>
        <table class="ui-flex ui-box" style="padding: 0 10px;">
            <tbody>
                <tr class="ui-flex bg-blue font-center font-black font-18">
                    <td>
                        项目
                    </td>
                    <td>
                        项目详情
                    </td>
                    <td></td>
                </tr>
                @foreach (ProjectModel item in Model)
            {
                    <tr class="ui-flex bg-white font-black ">
                        <td class="font-12 " style="border-top: none; border-right: none; width: 20%;">
                            <span>@item.dimName</span>
                        </td>
                        <td class="font-12 " style="border-top: none; border-right: none;">
                            <span class="font-wrap">@item.dimDesc</span>
                        </td>
                        <td style="border-top: none;">
                            <span class="icon-true"></span>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <ul class="ui-flex ui-box AreaList font-12 font-center" id="AreaList">
            <li class="ui-box col25" style="border: none;">管家人数：</li>
            <li class="ui-box col33" v-on:tap="ChoosePeople(1)">1人</li>
            <li class="ui-box col33" style="display:none;" v-on:tap="ChoosePeople(2)">2人</li>
        </ul>
        <ul class="ui-flex ui-box font-12 font-center AreaList">
            <li class="ui-box col25" style="border: none;">时间选择：</li>
            <li class="ui-box col20"><img v-on:tap="changehour(1)" src="~/Statics/Images/shop/main/left.png" style="height: 40px;" /></li>
            <li class="ui-box col20" style="border: 1px solid #6cc9Eb; height: 40px; line-height: 40px;">{{{hour}}}小时</li>
            <li class="ui-box col20"><img v-on:tap="changehour(2)" src="~/Statics/Images/shop/main/right.png" style="height: 40px;" /></li>
        </ul>
        <div v-on:tap="BuyCofime" class="ui-flex bg-blue font-16 font-white font-center ui-box" style="position: fixed; bottom: 0; left: 0; height: 40px; line-height: 40px"><span>小时工￥{{{price}}}.00</span></div>

    </div>
    <div class="ui-flex ui-box" v-if="showif" style="padding: 10px;">
        <img class="ui-flex" src="~/Statics/Images/shop/main/hetong.jpg" />
        <a class="bg-blue font-white btn font-center" v-on:tap="goBuy" style="width:60%; display: block; margin-left: 20%; border-radius: 5px; padding: 10px 0px; ">我接受</a>
    </div>
    <div class="ui-flex" style="height: 40px;">

    </div>

    <div>
        <form id="form" method="post">
            <input type="hidden" v-bind:value="data" name="data" />
        </form>
    </div>

    <input type="hidden" value="@ViewBag.OpenId" id="hiddOpenId" />
    <input type="hidden" value="@ViewBag.Levels" id="hiddLevels" />

</div>



@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")
    <style>
        .AreaList {
            margin-top: 50px;
            padding: 0px 10px;
        }

        #AreaList li{
            border: 1px solid #6cc9Eb;
            height: 50px;
            line-height: 50px;
        }

        .check {
            background-image: url("../../Statics/Images/shop/main/checkIn.png");
            background-size: cover;
        }
    </style>

}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        var model = new Vue({
            el: '#app',
            data: {
                OGSID: @ViewBag.Good[0].OGSID,
                price: @ViewBag.Good[0].ogsSalePrice*2,
                OpenId: '@ViewBag.OpenId',
                showif: false,
                showGood: true,
                peoplework: 40 ,
                hour:2,
            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                back: function () {
                    window.location.replace("./Main/Common?openid=@ViewBag.OpenId");
                },
                goBuy:function(){
                    $('#form').submit();
                },
                BuyCofime:function(){

                    alert("排版满咯~");
                    return;

                    this.showGood=false;
                    this.showif=true;
                },
                changehour:function(obj){
                    var self=this;
                    if(obj==1&&self.hour>2){
                        self.hour-=1;
                    }
                    else if(obj==2){
                        self.hour+=1;
                    }
                    self.price=self.hour*self.peoplework;
                },
                ChoosePeople:function(obj){
                    var self=this;
                    var idx=obj*25;
                    $.ajax({
                        type: "get",
                        url: "../../shop/Activity/ChangPeople/"+idx,
                        contentType: "application/json",
                        success: function (data) {
                            self.OGSID=data;
                            self.peoplework=idx;
                            self.price=self.hour*self.peoplework;
                        }
                    });

                },


            },


        })
        $(function(){

            $("#AreaList li:eq(1)").addClass("check");
            $("#AreaList li:eq(0)").siblings().bind("click",function(){
                $(".AreaList li").removeClass("check");
                $(this).addClass("check");

            })
        })

        function closaAcvt(){
            if(confirm("此活动已结束，持续关注活动不停哦！"))
            {
                window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx719afdb0aa0ebec4&redirect_uri=http%3a%2f%2fwww.qianjing-china.com%2fthousandclear%2fshop%2fSign&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect");
            }
            else{
                window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx719afdb0aa0ebec4&redirect_uri=http%3a%2f%2fwww.qianjing-china.com%2fthousandclear%2fshop%2fSign&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect");
            }
        }

    </script>
}